﻿@page "/DynamicFormTest"
@using System.ComponentModel.DataAnnotations
@inject HttpClient Http
@using System.Text.Json

<!--
    参考：https://jsonforms.io/examples/basic
    Gitlab：https://github.com/neuroglia-io/Neuroglia.Blazor.JsonForms
    -->

<h3>Generated Form</h3>

<link href="_content/Neuroglia.Blazor.JsonForms/lib/jsonforms-angular-webcomponent/styles.css" rel="stylesheet" />


<label>
    Read Only
    <input type="checkbox" checked="@readOnly" @onchange="e => this.readOnly = !this.readOnly" />
</label>
<JsonForm @ref="jsonForm" Schema="schema"
          Data="data"
          Options="options"
          ReadOnly="readOnly"
          DataChange="OnDataChange"></JsonForm>
<h2>Form value</h2>
<pre>
    @System.Text.Json.JsonSerializer.Serialize(this._data);
<RadzenTextArea Value=@json ValueChanged="JsonValueChanged" Cols="100" Rows="5" />

</pre>

<script src="_content/Neuroglia.Blazor.JsonForms/lib/jsonforms-angular-webcomponent/polyfills.js" type="module"></script><!-- optional, might already been provided elsewhere -->
<script src="_content/Neuroglia.Blazor.JsonForms/lib/jsonforms-angular-webcomponent/main.js" type="module"></script>

@code {
    JsonForm jsonForm;
    private object schema = new object();
    public string json { get; set; }
    //private string json = "{\"name\":\"JohnDoe\",\"age\":30,\"isEmployed\":true,\"addresses\":[{\"street\":\"123MainSt\",\"city\":\"Anytown\",\"state\":\"CA\",\"zipcode\":\"12345\"},{\"street\":\"456ElmSt\",\"city\":\"Othertown\",\"state\":\"NY\",\"zipcode\":\"67890\"}]}";

    protected override async Task OnInitializedAsync()
    {
        json = "{}";
        Refresh(json);
    }

    private object uischema = new
    {
        type = "VerticalLayout",
        elements = new[]
        {
            new
            {
                type="Control",
                label="Basic Information",
                scope= "#/properties/addressOrUser"
            }
        }
    };


    private object options = new
    {
        useDefaults = true
    };

    private object data = new
    {

    };

    // prevents data loop between setting the component `Data` parameter and reading the component data change
    private object _data = new
    {

    };

    private bool readOnly = false;

    private void OnDataChange(object data)
    {
        this._data = data;
        json = System.Text.Json.JsonSerializer.Serialize(this._data);
        this.StateHasChanged();
    }

    public async Task JsonValueChanged(string value)
    {
        json = value;
        Refresh(json);
        jsonForm.Data = data;
        jsonForm.Schema = schema;
        this.StateHasChanged();
    }

    private void Refresh(string json)
    {
        data = System.Text.Json.JsonSerializer.Deserialize<object>(json);
        var str = System.Text.Json.JsonSerializer.Serialize(data);
        JToken jsonToken = JToken.Parse(json);
        var generateSchema = JsonHelper.GenerateSchema(jsonToken);
        schema = System.Text.Json.JsonSerializer.Deserialize<object>("{\"type\":\"object\",\"required\":[],\"properties\":{\"object_1735006779625x0\":{\"title\":\"Object\",\"type\":\"object\",\"required\":[],\"properties\":{\"string_1735006780833x0\":{\"title\":\"输入框\",\"type\":\"string\",\"ui:options\":{\"placeholder\":\"请输入\"}},\"string_1735006783834x0\":{\"title\":\"输入框\",\"type\":\"string\",\"ui:options\":{\"placeholder\":\"请输入\"}},\"number_1735006789051x0\":{\"title\":\"数字输入框\",\"type\":\"number\",\"multipleOf\":1},\"string_1735006782129x0\":{\"title\":\"输入框\",\"type\":\"string\",\"ui:options\":{\"placeholder\":\"请输入\"}}},\"ui:order\":[\"string_1735006780833x0\",\"string_1735006783834x0\",\"number_1735006789051x0\",\"string_1735006782129x0\"]},\"object_1735006796385x0\":{\"title\":\"Object\",\"type\":\"object\",\"required\":[],\"properties\":{\"string_1735006798936x0\":{\"title\":\"输入框\",\"type\":\"string\",\"ui:options\":{\"placeholder\":\"请输入\"}},\"boolean_1735006806258x0\":{\"title\":\"是否选择(Switch)\",\"type\":\"boolean\"}},\"ui:order\":[\"string_1735006798936x0\",\"boolean_1735006806258x0\"]}},\"ui:order\":[\"object_1735006779625x0\",\"object_1735006796385x0\"]}");
    }
}